<template>
  <div :class="{'my':title==='我的','layout':true} ">
    <div class="nav">
      <van-nav-bar :title="title">
        <van-icon @click="onSend" v-if="active===2" name="add-o" slot="right" color="#000" size="22px" />
      </van-nav-bar>
    </div>
    <router-view></router-view>
    <van-tabbar :value="active" @change="tabChange" active-color="#f0321d">
      <van-tabbar-item icon="wap-home" title="首页" to="/index">首页</van-tabbar-item>
      <van-tabbar-item icon="todo-list-o" title="学习" to="/study">学习</van-tabbar-item>
      <!-- <van-tabbar-item icon="friends-o" info="5" title="会议" to="/meeting">会议</van-tabbar-item> -->
      <van-tabbar-item icon="friends-o" title="园地" to="/scope">园地</van-tabbar-item>
      <van-tabbar-item icon="contact" title="我的" to="/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // active: 0
    }
  },
  computed: {
    active () {
      return this.$store.state.currentBarIndex
    },
    title () {
      return this.$route.meta.title
    }
  },
  methods: {
    onSend () {
      this.$router.push({
        path: '/friend/send'
      })
    },
    tabChange (active, title) {
      this.$store.commit('setCurrentBar', active)
    }
  }
}
</script>

<style lang="less" scoped>
.layout.my {
  background-image: url("../assets/img/my/top-bg.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #fff;
  /deep/ .container{
    background-color: transparent;
  }
  /deep/ .van-nav-bar{
    background-color: transparent;
    &.van-hairline--bottom::after{
      border: none;
    }
    .van-nav-bar__title{
      color: #fff;
    }
  }
}
.layout {
  padding-top: 46px;
  min-height: 100%;
  box-sizing: border-box;
  background-color: #eee;
  padding-bottom: 60px;
  .nav {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
  }
}
</style>
